<template>
  <div>
    <common-head title="确认订单"/>
    <div class="wrap">
      <van-contact-card
        :type="cardType"
        :name="contact.linkMan"
        :tel="contact.mobile"
        @click="onEdit"
      />
      <div class="items">
        <div class="item" v-for="item in items" :key="item.id">
          <van-card
            :num="item.number"
            :price="item.price"
            :title="item.name"
            :thumb="item.pic"
          />
        </div>
      </div>
    </div>
    <van-submit-bar :price="total*100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import { defaultContact, getContact, fetchCartItems } from 'api'
import CommonHead from '../../components/CommonHead.vue'
import { getToken } from '../../utils'
export default {
  data () {
    return {
      contact: {},
      items: [],
      total: 0
    }
  },
  created () {
    this.fetchItems()
    this.defaultContact()
  },
  methods: {
    // 支付页面
    onSubmit () {},
    // 如果是有收货联系人点击就跳转到联系人列表,如果没有就跳转到'add'添加联系人列表
    onEdit () {
      this.$router.push('/contactLists')
    },
    defaultContact () {
      // 获取默认收货联系人信息
      if (this.$route.query.id) {
        getContact({
          id: this.$route.query.id,
          token: getToken()
        }).then(res => {
          if (res.data.code === 0) {
            this.contact = res.data.data.info
          }
        })
      } else {
        defaultContact({
          token: getToken()
        }).then(res => {
          if (res.data.code === 0) {
            this.contact = res.data.data.info
          }
        })
      }
    },
    fetchItems () {
      // 获取订单商品
      fetchCartItems({
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.items.filter(item => item.selected)
          this.total = res.data.data.price
        }
      })
    }
  },
  computed: {
    cardType () { // 利用计算属性的依赖,判断联系人列表是否有收货联系人,根据id判断,有就渲染默认联系收货人,没有就渲染空的待添加
      return this.contact.id ? 'edit' : 'add'
    }
  },
  components: { CommonHead }

}
</script>

<style lang="scss" scoped>
.wrap{
  padding-top: 46px;
  padding-bottom: 50px;
}
</style>
